<template>
  <table class="tableInfo" style="background-color: white">
    <tbody>
      <tr>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Target UPH</label>
        </td>
        <td id="Product" width="25%">{{ uphInfoForm.targetUph }}</td>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Average Test UPH</label>
        </td>
        <td id="Product" width="25%">{{ uphInfoForm.avgTestUph }}</td>
      </tr>
      <tr>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Real-Time Test UPH</label>
        </td>
        <td id="Product" width="25%">{{ uphInfoForm.rtTestUph }}</td>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Start Time</label>
        </td>
        <td id="Product" width="25%">{{ uphInfoForm.startTime }}</td>
      </tr>
      <tr>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Tested Time(Hours)</label>
        </td>
        <td id="Product" width="25%">{{ uphInfoForm.testedTime }}</td>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Lot Remain QTY</label>
        </td>
        <td id="Product" width="25%">{{ uphInfoForm.lotRemainQty }}</td>
      </tr>
      <tr>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Interruption Qty</label>
        </td>
        <td id="Product" width="25%">{{ uphInfoForm.interruptQty }}</td>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Interruption Time(Minutes)</label>
        </td>
        <td id="Product" width="25%">{{ uphInfoForm.interruptTime }}</td>
      </tr>
      <!-- <tr>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Lot Expect Finish Time(Hours)</label>
        </td>
        <td id="Product" width="25%">{{uphInfoForm.interruptTime}}</td>
      </tr> -->
    </tbody>
  </table>
</template>
<script>
export default {
  name: 'UphTable',
  components: {},
  props: {
    uphInfoForm: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>
<style lang='scss' scoped>
table {
  max-width: 100%;
  box-sizing: border-box;
  border-spacing:0;
}
.tableInfo {
  border: 1px solid #dddddd;
  width: 100%;
  table-layout: fixed;
  .text-info {
    color: #3a87ad;
  }
  tr td {
    padding: 0 6px;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
}
</style>
